<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="js/jquery-1.12.4.min.js"></script>

<script>
    // 1、原生 js 的入口函数
    // window.onload = function() {
    //     alert('我是原生的书写方式');
    // };

    // //2、jquery 的两种入口函数
    // $(document).ready(function() {
    //     alert('jquery的第一种入口和函数');
    // });

    $(function() {
        // console.log($('div'));
       

        // // 遍历循环的几种书写方法

        // // 1、原生js的书写方式
        // for (var i = 0; i < arr.length; i++) {
        //     console.log(arr[i]);
        // }

        // // for循环的简单写法， index 相当于下标  arr是要遍历的数组或者对象
        // for (index in arr) {
        //     console.log(index, arr[index]);
        // };

        // // 2、ES6 的书写方式
        // arr.forEach(v => {
        //     console.log(v);
        // });

        // arr.forEach(function(v, index) {
        //     console.log(index, v);
        // });
        // console.log('arr',arr);


        // // 3、jQuery 的书写方式 需要先引入 jquery 脚本
        // $.each(arr, function (index, v) {
        //     console.log(index, v);
        // });
        // console.log('数组长度', arr.length);
        // console.log('对象长度', obj.length);

        // 因为对象无法获取长度length 所以下面方法无法使用
        // for(var i = 0; i<obj.length;i++){
        //     console.log(i,arr['index']);
        // };

        // for(index in obj){
        //     console.log(index,obj[index]);
        // }
        
        // $(function(){
        //   $.each(obj,function(key,val){
        //     console.log(key,val);
        //   });
        // });


        
        // js for 循环的基本使用方式
        // for(var i = 0;i<arr.length;i++){
        //     console.log('i',i, arr[i]);
        // };

        // for(index in arr/obj){

        // };

        // array.forEach(v => {
        //     console.log(v);
        // });

        // array.forEach(arr,function(v,index){

        // });

        // $.each(arr,function(index,v){

        // });

        // for(var i = 0;i<100;i++){
        //     console.log('我日你大爷');
        // };

        // jQuery 的 each 方法是可以遍历为数组的 
        // var num = prompt('请输入次数');
        // var sum = 0;
        // for(var i = 0;i<=num;i++){
        //     sum += i;
        //     console.log('这个人'+i+'岁了');
        // };
        //   console.log('sum', sum);

        // var res = arr.map(function(e,index,array){
        //     console.log(index,e,array);
        //     return e + index;
        // });
        // console.log(res);

        // var res = $.map(arr,function(e,index){
        //     console.log(index,e);
        // })

        // var str = '              hello    ';
        //jQuery 通过 trim 函数去掉字符全两边的空格 $.trim(str);
        //js string.trim();
        // var strr =  $.trim(str);
        // var jsstr = str.trim();
        // console.log('strr',strr);
        // console.log('jsstr',jsstr);
        // console.log('str',str);
        // console.log(typeof str);
        // console.log(typeof arr);
        // console.log(typeof obj);
        // var shuz = [
        //     {
        //         id:1,
        //         name:'zhangshan'
        //     },
        //     {
        //         id: 2,
        //         name: 'xiaoli'
        //     },
        //     {
        //         id: 3,
        //         name: 'wangmazi'
        //     }
        // ];
        // console.log(111,typeof shuz);
        
        // $('.div8').click(function(){
        //     alert('99999999999999');
        // });
        
        
    //     var arr = [11, 22, 33, 44, 555, 666, 7777];
    //     var obj = { name: "lnj", age: "33", gender: "male" };

        
    //     var tes = $('a').attr('title','我是修改的内容');  //获取并修改
    //     console.log('tes',tes);
          
    //     var inp = $('input').attr('type');  //获取不修改
    //     console.log('inp', inp);
        

    //     var inp1 = $('.inp1').attr('type')
    //     console.log('inp1', inp1);

    //     // jQuery 动态修改元素的 类名
    //    $('.btn').click(function btn(params) { //params  形参  找到对应的元素绑定点击事件
    //        var text = $('div').attr('class', 'mian1');  //找到需要修改的属性
    //        console.log('text', text);
    //    });



    // var test = $('div').html();
    // console.log('test',test);

    // var test1 = $('.inp1').val();
    // console.log('test1', test1);
    
    // $('.add').append('<img src="https://csdnimg.cn/medal/chizhiyiheng@240.png" alt="">');

    // setTimeout(() => {
    //      $('.add').remove();
    // },3000);



    // $('.add').attr('class','mian1');
    // $('div').attr('class', 'mian1');


  
    $("div").removeAttr('class name');


    
    var a2 =  $('input').prop('checked');//true false
    var a1 = $('input').attr('checked');//checked undefined
    console.log('a2', a2);
    console.log('a1', a1);


    });
     
    // function btn() {
    //         var text = $('div').attr('class', 'mian1');
    //         console.log('text', text);
    //     };


    
</script>

<body>
    <!-- <div onclick="btn1()">div1</div>
    <div>div2</div>
    <div>div3</div>
    <div>div4</div>
    <div>div5</div>
    <div>div6</div>
    <div>div7</div>
    <div class="div8">div8</div>
    <button onclick="btn()">按钮</button> -->
    <a href="https://www.baidu.com" title="你还好吗">测试</a>
    <input type="checkbox" name="多选"  checked>
    <!-- <input type="number" class="inp1" value="555555555555"> -->
    
    <button class="btn">按钮</button>
    <div class="mian" name="测试">我是主要内容</div>
    <!-- <div class="add"></div> -->
    <span class="sss" name="测试"></span>
</body>

<style>
    .mian{
        font-size: 15px;
        color: blue;
    }
    .mian1{
        font-size: 20px;
        color: chartreuse;
    }
</style>

</html>